import { View } from "@tarojs/components";
import { ViewProps } from "@tarojs/components/types/View";
import { ComponentType, ReactElement } from "react";
import { AlignItems, FlexWrap, Position, JustifyContentProps } from "../types";

type FlexViewProps = ComponentType<
  ViewProps & {
    justifyContent?: JustifyContentProps;
    alignItems?: AlignItems;
    column?: boolean;
    width?: string;
    height?: string;
    wrap?: FlexWrap;
    style?: React.CSSProperties;
    bgc?: string;
    position?: Position;
  }
>;

const FlexView: FlexViewProps = ({
  justifyContent,
  alignItems,
  column,
  width,
  height,
  wrap,
  style,
  bgc,
  position = "relative",
  ...props
}): ReactElement => {
  return (
    <View
      style={{
        width,
        height,
        display: "flex",
        justifyContent,
        alignItems,
        flexDirection: column ? "column" : "row",
        flexWrap: wrap,
        position,
        backgroundColor: bgc,
        ...style,
      }}
      {...props}
    />
  );
};

export default FlexView;
